<template>
  <div class="rwxcSty-slecf" v-if="props.item.taskName" :class="{ hiddenlist: !state.isBreak }">
    <div class="rwxcTit r1">
      <span>{{ props.item.taskName }}</span>
      <div class="r1r" @click="packBtn" v-if="state.isBreak">
        收起

        <el-icon color="#fff"><ArrowDown /></el-icon>
      </div>
      <div class="r1r" @click="openBtn" v-if="!state.isBreak">
        展开

        <el-icon color="#fff"><ArrowUp /></el-icon>
      </div>
    </div>
    <div class="rwxcNr">
      <div>
        <span>基本情况：</span>
        {{ props.item.describe }}
      </div>
      <div>
        <span>状态：</span>
        <span style="color: #6e8dfb; font-weight: 500">{{
          props.item.taskState
        }}</span>
      </div>
      <div>
        <span> 完成率：</span>
        {{ percentNumber(props.item.complRate) }}
      </div>
      <div><span> 巡查人：</span>{{ props.item.inspectStaff }}</div>
      <div>
        <span>所属部门：</span>
        {{ props.item.inspectDept }}
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  item: Object,
});

const percentNumber = (value) => {
  return value;
};

const state = reactive({
  isBreak: true,
});
const packBtn = () => {
  state.isBreak = false;
};
const openBtn = () => {
  state.isBreak = true;
};
onMounted(async () => {});
</script>

<style scoped lang="scss">
.rwxcSty-slecf {
  width: 342px;
  /* padding: 0 20px 20px; */
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 3px 3px 6px 0px #bdcde6,
    -4px -3px 4px 0px rgba(255, 255, 255, 0.5);
  overflow: hidden;
  &.hiddenlist {
    height: 40px !important;
  }
}
.rwxcTit {
  background: #2263bf;
  line-height: 40px;
  font-size: 16px;
  padding: 0 20px;
  color: #fff;
  border-radius: 6px 6px 0 0;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .r1r {
    margin-left: auto;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
  }
}
.rwxcNr {
  padding: 10px 20px 20px;
  font-size: 14px;
  color: #58627b;
  line-height: 24px;
  span {
    color: #333;
    font-weight: bold;
  }
}
</style>
